iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
3
Modern Web

從零開始的個人化記帳程式開發系列 第 9

記帳程式 (09):基本功能開發 - 月記帳本 Part.1

  • 分享至 

  • xImage
  •  

昨天針對 vue-route 及 menu 的部分調整好了後,終於可以開始做功能開發了!

今天就要著手來進行第一個基本功能 —— 月記帳本。

安排檔案結構

今天的原始碼參考:Github

說明頁面開發檔案結構:

  • views:頁面的最外層,會引入各種 containerscomponents
  • containers:區分頁面結構的容器,將頁面區分成好幾個區塊,並引入必要的 components
  • components:畫面的最小單位元件,放共用元件。

下面會以「月記帳本」這個頁面為例說明。

月記帳本畫面開發

先看今天的結果:

可以看到在月記帳本這個畫面中,主要會需要三個大區塊:

  • BillingCalendar:記帳用的月曆
  • BillingList:收入、支出、轉帳明細列表
  • BillingDialog:新增記帳紀錄時的對話框

因此將這三大區塊切成各個 container 管理程式碼,並由 @/views/Billing/index.vue 整合這三個 container

<template>
  <div class="pg-billing">
    <BillingCalendar />
    <BillingList />
    <BillingDialog />
  </div>
</template>

而「記帳紀錄列表」與「記帳對話框」這兩個部分,目前先使用假資料安排畫面。

利用 element-ui 中的 el-tableel-dialog 即可快速達到畫面中的需求,UI 元件庫用起來就是這麼方便:

<el-dialog title="新增紀錄" :visible.sync="dialogFormVisible">
  <el-form :model="form" label-width="80px">
    <el-form-item label="金額">
      <el-input
        v-model.number="form.dollor"
        placeholder="請輸入金額"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="類別">
      <el-select v-model="form.type" placeholder="请選擇類別">
        <el-option label="早餐" value="breakfast"></el-option>
        <el-option label="午餐" value="lunch"></el-option>
        <el-option label="晚餐" value="dinner"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="帳戶">
      <el-select v-model="form.account" placeholder="请選擇帳戶">
        <el-option label="現金" value="cash"></el-option>
        <el-option label="信用卡" value="credit-card"></el-option>
        <el-option label="電子支付" value="pay"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="項目">
      <el-input
        v-model="form.title"
        placeholder="請輸入項目內容"
        autocomplete="off"
      ></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false"
      >儲存</el-button
    >
  </div>
</el-dialog>

小結

今天將月記帳本的基本畫面安排好了,明天就可以開始來串各個區塊間的資料囉,我們明天見!

後記

今天快 20:00 才下班,回家馬上趕鐵人賽文章,這個一步一步逼近 deadline 的感覺真刺激啊!


上一篇
記帳程式 (08):vue-router 與 menu 串接
下一篇
記帳程式 (10):基本功能開發 - 月記帳本 Part.2
系列文
從零開始的個人化記帳程式開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-03-04 03:53:49

commit com起來!

0
Pangolin
iT邦新手 5 級 ‧ 2021-04-30 23:46:49

那個大大form.dollor拼錯了,是dollar才對,難怪我資料沒有綁到XD

【**此則訊息已被站方移除**】

我要留言

立即登入留言